/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-form-item {
	padding: var(--pure-form-item-padding, 16px 0);
	position: relative;

	&__body {
		display: flex;
		flex-direction: row;
		align-items: var(--pure-form-item-align-items, center);
		gap: var(--pure-form-item-gap);
		height: 100%;
		line-height: 1;
	}

	&__left {
		display: flex;
		flex-direction: var(--pure-form-item-left-flex-direction, row);
		align-items: var(--pure-form-item-left-align-items, center);
		justify-content: var(--pure-form-item-left-justify-content);
		flex-shrink: 0;
		gap: var(--pure-form-item-left-gap, 2px);
		width: var(--pure-form-item-left-width);
		max-width: var(--pure-form-item-left-max-width, var(--pure-form-item-left-width, 6em));
		position: relative;
		flex-wrap: wrap;

		&--placeholder {
			visibility: hidden;
			height: 0;
			overflow: hidden;
			opacity: 0;
		}
	}

	&__required {
		display: var(--pure-form-item-required-display, inline-flex);
		flex-direction: var(--pure-form-item-required-flex-direction, column);
		align-items: var(--pure-form-item-required-align-items, center);
		justify-content: var(--pure-form-item-required-justify-content, center);
		font-size: var(--pure-form-item-required-font-size);
		font-weight: var(--pure-form-item-required-font-weight);
		color: var(--pure-form-item-required-color, var(--pure-theme-danger));
		position: var(--pure-form-item-required-position, absolute);
		left: var(--pure-form-item-required-left, 0);
		top: var(--pure-form-item-required-top, 0);
		right: var(--pure-form-item-required-right);
		bottom: var(--pure-form-item-required-bottom);
		z-index: var(--pure-form-item-required-z-index, 2);
		margin: var(--pure-form-item-required-margin);
		padding: var(--pure-form-item-required-padding);
		transform: var(--pure-form-item-required-transform, translateX(-100%));
		order: var(--pure-form-item-required-order, 0);
		flex-shrink: 0;
	}

	&__icon {
		font-size: var(--pure-form-item-icon-font-size, var(--pure-font-size-big));
		font-weight: var(--pure-form-item-icon-font-weight);
		color: var(--pure-form-item-icon-color);
		margin: var(--pure-form-item-icon-margin);
		padding: var(--pure-form-item-icon-padding);
		width: var(--pure-form-item-icon-width);
		height: var(--pure-form-item-icon-height);
		order: var(--pure-form-item-icon-order, 2);
		flex-shrink: 0;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	&__label {
		font-size: var(--pure-form-item-label-font-size);
		font-weight: var(--pure-form-item-label-font-weight);
		color: var(--pure-form-item-label-color);
		margin: var(--pure-form-item-label-margin);
		padding: var(--pure-form-item-label-padding);
		width: var(--pure-form-item-label-width);
		height: var(--pure-form-item-label-height);
		order: var(--pure-form-item-label-order, 4);
		flex-shrink: 0;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	&__sublabel {
		font-size: var(--pure-form-item-sublabel-font-size, var(--pure-font-size-small));
		font-weight: var(--pure-form-item-sublabel-font-weight);
		color: var(--pure-form-item-sublabel-color);
		margin: var(--pure-form-item-sublabel-margin);
		padding: var(--pure-form-item-sublabel-padding);
		width: var(--pure-form-item-sublabel-width);
		height: var(--pure-form-item-sublabel-height);
		order: var(--pure-form-item-sublabel-order, 6);
		flex-shrink: 0;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		word-break: break-all;
		max-width: 100%;
	}

	&__main {
		display: flex;
		flex-direction: row;
		align-items: var(--pure-form-item-main-align-items, center);
		flex: 1;
		text-align: var(--pure-form-item-main-text-align);
	}

	&__content {
		flex: 1;
		margin: var(--pure-form-item-content-margin, 0 6px 0 12px);
		padding: var(--pure-form-item-content-padding);
		display: flex;
		flex-direction: column;
		align-items: var(--pure-form-item-content-align-items);
		min-height: var(--pure-form-item-content-min-height, 1em);
	}

	&__right {
		flex-shrink: 0;
		display: flex;
		flex-direction: row;
		align-items: var(--pure-form-item-right-align-items, center);
		gap: var(--pure-form-item-right-gap);
	}

	&__arrow {
		font-size: var(--pure-form-item-arrow-font-size);
		font-weight: var(--pure-form-item-arrow-font-weight);
		color: var(--pure-form-item-arrow-color, var(--pure-text-color-light));
		margin: var(--pure-form-item-arrow-margin);
		padding: var(--pure-form-item-arrow-padding);
		width: var(--pure-form-item-arrow-width);
		height: var(--pure-form-item-arrow-height);
		transform: rotate(var(--pure-form-item-arrow-rotate, 0deg));
		transition: var(--pure-form-item-arrow-transition, transform 0.3s);
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	&__tips {
		color: var(--pure-form-item-tips-color, var(--pure-theme-danger));
		margin: var(--pure-form-item-tips-margin, 6px 0 0 0);
		padding: var(--pure-form-item-tips-padding);
		// padding-left: var(--pure-form-item-left-padding-left, var(--pure-form-item-left-width-real));
		text-align: var(--pure-form-item-tips-text-align);
		width: var(--pure-form-item-tips-width);
		height: var(--pure-form-item-tips-height);
		display: flex;
		flex-direction: row;
		gap: var(--pure-form-item-gap);
		height: var(--pure-form-item-tips-height);

		&__content {
			margin: var(--pure-form-item-content-margin, 0 6px 0 12px);
			font-size: var(--pure-form-item-tips-font-size, var(--pure-font-size-small));
			font-weight: var(--pure-form-item-tips-font-weight);
		}
	}

	&--error {
		border-color: var(--pure-form-item-error-border-color, var(--pure-theme-danger));

		&--border-all {
			border-width: var(--pure-form-item-error-border-width, 1px);
		}

		&--border-bottom {
			border-bottom-width: var(--pure-form-item-error-border-width, 1px);
		}
	}

	&__label-position {
		&__top {
			.pure-form-item__body {
				flex-direction: column;
				align-items: stretch;
				gap: var(--pure-form-item-gap, 5px);
			}

			.pure-form-item__left {
				max-width: var(--pure-form-item-left-max-width, var(--pure-form-item-left-width, 100%));
			}

			.pure-form-item__main {
				padding: var(--pure-form-item-padding, 16px 0 8px);
			}

			.pure-form-item__content {
				margin: var(--pure-form-item-content-margin, 0);
			}

			.pure-form-item__tips {
				margin: var(--pure-form-item-tips-margin, 6px 0 0 0);
				padding-left: var(--pure-form-item-left-padding-left, 0);

				&__content {
					margin: var(--pure-form-item-content-margin, 0);
				}
			}

			.pure-form-item__left--placeholder {
				width: 0;
			}
		}
	}

	&--disabled {
		pointer-events: none;
		opacity: var(--pure-form-item-disabled-opacity, var(--pure-opacity-disabled));
	}

	&--readonly {
		position: relative;
		pointer-events: none;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: transparent;
			z-index: 1;
			opacity: 0;
			pointer-events: var(--pure-form-item-readonly-pointer-events, all);
		}

		.pure-form-item__body {
			pointer-events: none;
		}
	}

	&--content-align-left {
		.pure-form-item__content {
			align-items: var(--pure-form-item-content-align-items, flex-start);
			text-align: var(--pure-form-item-main-text-align, left);
		}

		.pure-form-item__tips {
			justify-content: var(--pure-form-item-tips-justify-content, flex-start);
			text-align: var(--pure-form-item-main-text-align, left);
		}
	}

	&--content-align-right {
		.pure-form-item__content {
			align-items: var(--pure-form-item-content-align-items, flex-end);
			text-align: var(--pure-form-item-main-text-align, right);
		}

		.pure-form-item__tips {
			justify-content: var(--pure-form-item-tips-justify-content, flex-end);
			text-align: var(--pure-form-item-main-text-align, right);
		}
	}

	&--hide-required-symbol {
		display: var(--pure-form-item-required-display, none);
	}

	&--always-tips {
		.pure-form-item__tips {
			height: var(--pure-form-item-tips-height, 1em);
		}
	}
}
